<script setup lang="ts" name="ArticleCard">
import type { Article } from '@/class/Article';
import { RouterName } from '@/router';
import { successMessage } from '@/utils/message';

import { useRoute, useRouter } from 'vue-router';

const props = defineProps<{ project_article_Data: Article[] }>()
let router = useRouter()
function to_article_content(id: string) {
  router.push({
    name: RouterName.ArticleEdit,
    query: {
      id: id
    }
  })
}
function delete_method(item: Article) {
  item.deleteArticle().then(result => {
    if (result) {
      successMessage("删除成功")
    }
  })
}

</script>

<template>
  <div class="hello">
    <div class="project_content">
      <el-card class="project_article_box card" v-for="item in project_article_Data" :key="item.id"
        style="line-height: 40px">
        <div @click="to_article_content(item.id)">
          <div class="project_article_title">
            <div href="javascript:">{{ item.title }}</div>
          </div>
          <p class="project_article_intro" v-html="item.intro"></p>

        </div>
        <p class="article_list_items">
          <el-button @click="delete_method(item)" type="danger" circle class="article_list_item">
            <el-icon>
              <Delete />
            </el-icon>
          </el-button>
          <span class="article_list_item">{{ item.createtime }}</span>
        </p>
      </el-card>
    </div>
  </div>
</template>


<style scoped>
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;

}

.hello {
  overflow: visible;
}

.card {
  margin: 10px;
}

.article_list_items {
  float: right;
  color: #8c939d;
  margin: 0;
}

.article_list_item {
  padding: 5px;
}

.project_article_title {
  color: #5f99c7;
  font-weight: bold;
  margin: 0;
}

.project_article_intro {
  margin: 0;
}
</style>